<template>
  <div class="container">
    <div class="center">
      <vue-danmaku ref="danmaku" :danmus="danmus"
                   use-slot loop
                   :speeds="200" :channels="5"
                   :isSuspend="true"
                   style="width: 600px;
                   height: 800px;
color: black">
        <!-- 弹幕插槽（vue 2.6.0 及以上版本可使用 v-slot:dm="{ index, danmu }"语法） -->
        <template slot="dm" slot-scope="{ index, danmu }">
          <div style="display: flex">
            <avatar :src="danmu.avatar"></avatar>
            {{ danmu.name }}：{{ danmu.text }}
          </div>
        </template>
        <!-- 容器插槽 -->
        <div></div>
      </vue-danmaku>
    </div>
  </div>
</template>

<script>
import vueDanmaku from 'vue-danmaku'
import Avatar from '@/components/Avatar'

export default {
  components: {
    Avatar,
    vueDanmaku
  },
  data () {
    return {
      danmus: [{
        avatar: 'https://www.duanqing.online:9000/blog/logo.png',
        name: 'a',
        text: 'aaa'
      }, {
        avatar: 'https://www.duanqing.online:9000/blog/logo.png',
        name: 'b',
        text: 'bbb'
      }]
    }
  }
}
</script>
